<script>
import request from "../../../utils/request";
import { copyText, handleMoney } from "../../../utils";
import behavior from "./behavior";
import copyIcon from "./assets/copy.png";

export default {
  name: "detail",
  computed: {
    behavior() {
      return behavior;
    },
  },
  data() {
    return {
      ordNo: "",
      orderDetail: {},
      copyIcon,
    };
  },
  onLoad(options) {
    this.ordNo = options.ordNo;
    this.getOrderDetail();
  },
  methods: {
    copyText,
    handleMoney,
    getOrderDetail() {
      request({
        url: "ord/getOrdDetailInfo",
        data: {
          ordNo: this.ordNo,
        },
        errorHandle: true,
        showLoading: true,
      }).then((res) => {
        this.orderDetail = res;
        console.log(this.orderDetail, "this.orderDetail");
      });
    },
  },
};
</script>

<template>
  <view class="page">
    <!--		订单状态-->
    <view class="order-status">
      <text :class="[behavior.getClassByStatus(orderDetail.ordStatusCode)]"
        >{{ orderDetail.ordStatusName }}
      </text>
    </view>
    <view class="divider-line"></view>
    <!--		订单分类-->
    <view class="order-class">{{ orderDetail.ordClassName }}</view>
    <!--	订单元信息	-->
    <view class="order-meta">
      <view class="order-meta-item">
        <view class="label">订单号</view>
        <view class="value">
          <text :selectable="true">{{ orderDetail.ordNo }}</text>
          <image
            :src="copyIcon"
            class="icon"
            @click="copyText(orderDetail.ordNo)"
          ></image>
        </view>
      </view>
      <view class="order-meta-item">
        <view class="label">订单日期</view>
        <view class="value">{{ orderDetail.ordDate }}</view>
      </view>
      <view class="order-meta-item">
        <view class="label">订单金额</view>
        <view class="value primary"
          >￥{{ handleMoney(orderDetail.ordSum) }}</view
        >
      </view>
      <view class="order-meta-item" v-if="orderDetail.deliverTypeCode">
        <view class="label">运费</view>
        <view class="value">￥{{ handleMoney(orderDetail.postage) }}</view>
      </view>
      <view class="order-meta-item" v-if="orderDetail.leaveWord">
        <view class="label">买家附言</view>
        <view class="value">{{ orderDetail.leaveWord }}</view>
      </view>
      <view class="order-meta-item" v-if="orderDetail.ordRemark">
        <view class="label">备注</view>
        <view class="value">{{ orderDetail.ordRemark }}</view>
      </view>
      <!--			<view class="order-meta-item">-->
      <!--				<view class="label">退款金额</view>-->
      <!--				<view class="value">￥{{ handleMoney(orderDetail.refundSum) }}</view>-->
      <!--			</view>-->
      <!--			优惠券信息-->
      <template v-if="orderDetail.coupon">
        <view class="order-meta-item">
          <view class="label">所用优惠券</view>
          <view class="value">{{ orderDetail.coupon.couponName }}</view>
        </view>
        <!--				价格策略为：价格和满减时才展示-->
        <view
          class="order-meta-item"
          v-if="['0', '2'].includes(orderDetail.coupon.priceStrategy)"
        >
          <view class="label">优惠券减免金额</view>
          <view class="value primary"
            >-￥{{ handleMoney(orderDetail.coupon.reductionPrice) }}
          </view>
        </view>
        <view
          class="order-meta-item"
          v-if="['1'].includes(orderDetail.coupon.priceStrategy)"
        >
          <view class="label">优惠券折扣</view>
          <view class="value"
            >{{ orderDetail.coupon.discountRate * 10 }}折
          </view>
        </view>
      </template>
    </view>
    <!--		订单商品信息列表-->
    <block
      v-for="item in orderDetail.detailList"
      :key="item.ordDetailId"
      v-if="orderDetail.detailList && orderDetail.detailList.length"
    >
      <view class="divider-line"></view>
      <view class="order-meta">
        <view class="order-meta-item">
          <view class="label">商品名称</view>
          <view class="value">{{ item.productName }}</view>
        </view>
        <view class="order-meta-item">
          <view class="label">商品价格</view>
          <view class="value primary"
            >￥{{ handleMoney(item.productPrice) }}</view
          >
        </view>
        <view class="order-meta-item">
          <view class="label">数量</view>
          <view class="value primary">x{{ item.quantity }}</view>
        </view>
      </view>
    </block>
    <view class="footer-btn">
      <view
        class="button plain"
        v-if="orderDetail.ordStatusCode === 'WaitPay'"
        @click.stop="
          behavior.cancelOrder(orderDetail).then(() => {
            getOrderDetail();
          })
        "
        >取消订单
      </view>

      <view
        class="button primary"
        v-if="orderDetail.ordStatusCode === 'WaitPay'"
        @click.stop="
          behavior.orderPay(orderDetail).then(() => {
            getOrderDetail();
          })
        "
        >立即支付
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.page {
  padding: 30rpx;
  min-height: 100vh;
  box-sizing: border-box;

  > .order-status {
    font-size: 40rpx;

    > .success {
      color: #149764;
    }

    > .info {
      color: var(--text-color-light);
    }

    > .warning {
      color: #d0a30e;
    }
  }

  > .divider-line {
    margin: 60rpx 0;
    height: 2rpx;
    background: var(--border-color);
  }

  > .order-class {
    font-size: 40rpx;
    color: var(--text-color);
    font-weight: 500;
    margin-bottom: 40rpx;
  }

  > .order-meta {
    > .order-meta-item {
      display: flex;
      justify-content: space-between;
      font-size: 32rpx;
      margin-bottom: 40rpx;
      color: var(--text-color);

      .primary {
        color: #f19d3d;
        font-weight: bold;
      }

      > .value {
        > .icon {
          margin-left: 20rpx;
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }

  .footer-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
    width: 100vw;
    display: flex;
    justify-content: space-around;

    > .button {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    > .button:not(:last-child) {
      font-size: 32rpx;
      margin-right: 30rpx;
    }

    > .primary {
      background-color: #f19d3d;
      color: white;
      padding: 0 54rpx;
      height: 80rpx;
      border-radius: 40rpx;
      font-weight: 500;
    }

    > .info {
      color: var(--text-color-light);
    }

    > .plain {
      color: var(--text-color-light);
      padding: 0 54rpx;
      height: 80rpx;
      border-radius: 40rpx;
      font-weight: 500;
      border: 4rpx solid var(--border-color);
    }
  }
}
</style>
